<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .container {
            border: 1px solid red;
            max-width: 960px;
            margin: 15px auto;
        }
    </style>
</head>
<body>
<div class="container">
    <form>
        <div class="form-group">
            <label class="form-group-label">用户名</label>
            <div class="form-group-input">
                <input type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="form-group-label">密码</label>
            <div class="form-group-input">
                <input type="password">
            </div>
        </div>
        <div class="form-group">
            <label class="form-group-label">性别</label>
            <div class="form-group-input">
                <label><input type="radio" name="sex">男</label>
                <label><input type="radio" name="sex">女</label>
            </div>
        </div>
    </form>
    <hr>
    <p>
        掌握以上给定的HTML布局方法 <br>
        基于以上已实现的form布局，通过添加CSS代码实现需要的样式
        <br>
        参考：https://getbootstrap.net/docs/components/forms/#horizontal-form
        <br>
        <b>原理与思路</b><br>
        所有文本，密码的input元素，全局横向占用最大，圆角，内边距；<br>
        声明form-group类，放置说明与输入域的行容器，横向弹性布局，元素居中对齐；<br>
        声明form-label类，放置说明，文本右对齐，占20%，注意弹性百分比的占用属性；<br>
        声明form-input类，放置输入域，互交的输入域可能是多个，因此是容器，占80%；<br>
        元素间，通过内边距推开
    </p>
</div>
</body>
</html>